<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>modify</title>


    <link rel="stylesheet" th:href="@{/css/layui.css}">
    <link rel="stylesheet" th:href="@{/css/modify.css}">
    <script th:src="@{/js/vue.min.js}"></script>
    <script th:src="@{/js/axios.min.js}"></script>
    <script th:src="@{/js/layui.js}"></script>
    <script src="https://cdn.bootcss.com/blueimp-md5/2.10.0/js/md5.min.js"></script>

</head>
<body>


<div id="container" class="layui-fluid">

    <div class="layui-row layui-col-space10 box">
        <div class="layui-col-md2 layui-col-xs2">
            <label>账号:</label>
        </div>
        <div class="layui-col-md9 layui-col-xs9">
            <div>
                <input class="layui-input" readonly type="text" name="username" v-model="username">
            </div>
        </div>
    </div>


    <div class="layui-row layui-col-space10 box">
        <div class="layui-col-md2 layui-col-xs2">
            <label>密码:</label>
        </div>
        <div class="layui-col-md9 layui-col-xs9">
            <div>
                <input class="layui-input"  type="text" name="password" v-model="password">
            </div>
        </div>
    </div>


    <div class="layui-row box">
        <div class="layui-col-md5 layui-col-xs5 b" style="padding-left: 80px">
            <button class="layui-btn layui-btn-normal layui-btn-radius layui-btn-lg" @click="save">保存</button>
        </div>

        <div class="layui-col-md4 layui-col-xs4 b" style="padding-left: 100px">
            <button class="layui-btn layui-btn-normal layui-btn-radius layui-btn-lg" @click="reverse">取消</button>
        </div>
    </div>


</div>

</body>

<script type="text/javascript" th:inline="javascript">
      var vue = new Vue({
          el:'#container',
          data:{
              username:[[${username}]],
              password:[[${password}]],
              pre:''
          },
          methods:{
              save : function () {

                  var pattern = /^[a-zA-Z0-9]{8,12}$/;
                  if (!pattern.test(this.password)) {
                      let str = '请输入正确的密码!'
                      layer.alert(str, {
                          time: 3000
                      })
                      return;
                  }

                  var data = new FormData();

                  data.append("username",this.username);
                  data.append("password",md5(this.password));
                  data.append("_method","put");
                  axios({
                      url:'http://localhost:8080/manager/update',
                      method:'post',
                      data:data
                  }).then((response)=>{
                      this.password = response.data;
                      let str = '修改成功!'
                      layer.alert(str, {
                          time: 3000
                      })
                      return;
                  })

              },
              reverse : function () {
                   this.password = '';
              }

          },
      })
</script>
</html>